<template>
  <div>
    <h2 class="title">导航标记sign使用</h2>
    <div class="nav cont">
      <div
        class="cont-list nav-list"
        v-for="item in list"
        :key="item.id"
        v-items="item"
        data-sign="nav"
        :data-assign="item.id === 3"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="cont">
      <div
        is="hm-widget-text"
        class="cont-list"
        v-for="item in tipList"
        :key="item.id"
        v-items="item"
        :title="item.title"
        :summary="item.summary"
        :flag="item.flag"
        @vFocus="focus"
        @vBlur="lostFocus"
      ></div>
    </div>
  </div>
</template>
<script>
import widgetText from "@/components/widgetText.vue";
import { axiosGet } from "@/global/request";
export default {
  name: "list",
  components: {
    [widgetText.name]: widgetText,
  },
  data() {
    return {
      list: [],
      tipList: [],
    };
  },
  methods: {
    initEvent() {
      this.$Focus.keyBack = () => {
        this.$store.commit("addExclude", "list");
        this.$router.back();
      };
    },
    focus(pointer) {
      pointer.data.flag = true;
    },
    lostFocus(pointer) {
      pointer.data.flag = false;
    },
    pageload() {
      this.$PageLoad.close();
      this.initEvent();
    },
  },
  mounted() {
    this.pageload();
  },
  created() {
    axiosGet("/js/detail.json", (res) => {
      this.list = res[0].data;
      this.tipList = res[1].data;
      this.$Focus.initFocus((value) => value.data.id === 3);
    });
  },
  activated() {
    this.pageload();
  },
};
</script>
<style lang="scss" scoped>
.title {
  color: #000;
}
.cont {
  padding: 20px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  &.nav {
    flex-flow: row nowrap;
  }
  .cont-list {
    flex: 0 0 auto;
    font-size: 24px;
    margin-bottom: 24px;
  }
  .nav-list {
    flex: 0 1 auto;
    color: #000;
    &.curselect {
      color: #ffca28;
    }
    &.focushover {
      color: red;
    }
  }
}
.tip {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 50px;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10;
}
</style>
